<template>
  <div>
    <el-row type="flex" justify="space-between" class="contract-card-list-con">
      <el-row type="flex">
        <span class="contract-card-list-con-color" :style="{ backgroundColor: templateList.color }"></span>
        <div>
          <h2 class="contract-card-list-con-title">{{ templateList.systemTemplate ? $t('common.contract.defaultContract') : templateList.templateName }}</h2>
          <p class="contract-card-list-con-updatetime">{{ $t('common.base.lastUpdate') }}: {{  templateList.updateUserName }}</p>
          <p class="contract-card-list-con-updatetime">{{ $t('common.base.column.updateTime') }}: {{ updateTime | fmt_date }}</p>
        </div>
      </el-row>

      <div class="settings">
        <el-switch :value="templateList.enabled" :active-value="true" :inactive-value="false" @change="handleSwitch"> </el-switch>
        <i class="iconfont icon-tuozhuaipaixu drag-icon"></i>
      </div>
    </el-row>
    <el-row class="contract-card-list-operation" type="flex">
      <div class="contract-card-list-operation-del pub-btn" @click="handleClickDel" v-if="!templateList.systemTemplate">
        <i class="iconfont icon-delete">{{ $t('common.base.delete') }}</i>
      </div>
      <div class="contract-card-list-operation-modify pub-btn" @click="handleClickEdit(templateList)">
        <i class="iconfont icon-edit-square">{{ $t('common.base.edit') }}</i>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { MessageBox } from 'element-ui';
import i18n from '@src/locales';
import { openAccurateTab, toast } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';

import { formatDate } from 'pub-bbx-utils';
import { getContractTemplateStatus, deleteContractTemplate } from '@src/api/ContractApi.ts';
import { notification } from '@src/util/platform';

export default defineComponent({
  name: 'contract-card-list',
  props: {
    templateList: {
      type: Object,
      default: () => ({}),
    },
    typeNum: {
      // 已经开启的数量
      type: Number,
      default: 0,
    },
  },
  emits: ['handleDelete'],
  setup(props, { emit }) {
    const dialogVisible = ref(false);

    // 更新时间转换
    const updateTime = computed(() => {
      return formatDate(props?.templateList?.updateTime, 'YYYY-MM-DD HH:mm:ss');
    });

    // 点击开关
    const handleSwitch = async val => {
      if (!val && props.typeNum <= 1) {
        notification({
          title: i18n.t('contract.setting.contractTemplate.tips1'),
          type: 'error',
        });
        return;
      }

      try {
        let ret = await getContractTemplateStatus({
          id: props?.templateList?.id || '',
          enabled: val,
        });

        const { success, message, result } = ret || {};

        if (!success) return toast(message, 'error');

        props.templateList.enabled = val;

        toast(i18n.t('common.base.tip.modifySuccess'), 'success');
      } catch (err) {
        console.log('error => 点击合同模板开关', err);
      }
    };

    // 点击删除
    const handleClickDel = () => {
      MessageBox.confirm(i18n.t('contract.setting.contractTemplate.text7', { contractName: props.templateList.templateName }), i18n.t('contract.setting.contractTemplate.text8'), {
        confirmButtonText: i18n.t('common.base.makeSure'),
        cancelButtonText: i18n.t('common.base.cancel'),
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            deleteContractTemplate({
              id: props?.templateList?.id || '',
            }).then(res => {
              instance.confirmButtonLoading = false;

              if (!res.success) {
                return toast(res.message, 'error');
              }

              toast(i18n.t('common.base.tip.deleteSuccess'), 'success');

              done();

              emit('handleDelete');
            });
          } else {
            instance.confirmButtonLoading = false;
            done();
          }
        },
      });
    };

    const openTab = contractTemplateId => {
      let fromId = window.frameElement?.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageContractFlowSetting,
        params: `id=${contractTemplateId}`,
        fromId,
      });
    };

    // 点击编辑
    const handleClickEdit = ({ id }) => {
      openTab(id);
    };

    return {
      dialogVisible,
      updateTime,
      handleSwitch,
      handleClickDel,
      handleClickEdit,
    };
  },
});
</script>
<style lang="scss" scoped>
.contract-card-list {
  padding-right: 12px;
  &-con {
    padding: 20px;
    height: calc(100% - 32px);
    &-color {
      display: block;
      width: 14px;
      min-width: 14px;
      height: 14px;
      margin: 3px 5px 0 0;
      border-radius: 50%;
    }
    &-title {
      height: 40px;
      margin-bottom: 12px;
      @include text-ellipsis-2;
      word-break: break-all;
      font-size: 16px;
      color: #333333;
    }
    &-updatetime {
      margin-bottom: 8px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666666;
      @include text-ellipsis-2;
      word-break: break-all;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .settings {
      display: flex;
      flex-direction: column;
      .drag-icon {
        display: none;
        margin-top: 23px;
        font-size: 12px;
        text-align: right;
      }
    }
    &:hover {
      cursor: move;
      .drag-icon {
        display: block !important;
      }
    }
  }

  &-operation {
    height: 32px;
    line-height: 32px;
    border-top: 1px solid#F5F5F5;
    .pub-btn {
      cursor: pointer;
      flex: 1;
      text-align: center;
      color: #999999;
    }
    i {
      font-size: 12px;
      &::before {
        margin-right: 8px;
      }
    }
    &-del {
      border-right: 1px solid #f5f5f5;
      &:hover {
        color: $color-danger;
      }
    }
    &-modify {
      &:hover {
        color: $color-primary;
      }
    }
  }
}
</style>

